<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Highcharts Example</title>

    <script type="text/javascript" src="../../js/jquery-1.8.2.min.js"></script>
    <style type="text/css">
        ${demo.css}
    </style>
    <script type="text/javascript">
        $(function () {

            Highcharts.data({
                csv: document.getElementById('tsv').innerHTML,
                itemDelimiter: '\t',
                parsed: function (columns) {

                    var brands = {},
                        brandsData = [],
                        versions = {},
                        drilldownSeries = [];

                    // Parse percentage strings
                    columns[1] = $.map(columns[1], function (value) {
                        if (value.indexOf('%') === value.length - 1) {
                            value = parseFloat(value);
                        }
                        return value;
                    });

                    $.each(columns[0], function (i, name) {
                        var brand,
                            version;

                        if (i > 0) {

                            // Remove special edition notes
                            name = name.split(' -')[0];

                            // Split into brand and version
                            version = name.match(/([0-9]+[\.0-9x]*)/);
                            if (version) {
                                version = version[0];
                            }
                            brand = name.replace(version, '');

                            // Create the main data
                            if (!brands[brand]) {
                                brands[brand] = columns[1][i];
                            } else {
                                brands[brand] += columns[1][i];
                            }

                            // Create the version data
                            if (version !== null) {
                                if (!versions[brand]) {
                                    versions[brand] = [];
                                }
                                versions[brand].push(['v' + version, columns[1][i]]);
                            }
                        }

                    });

                    $.each(brands, function (name, y) {
                        brandsData.push({
                            name: name,
                            y: y,
                            drilldown: versions[name] ? name : null
                        });
                    });
                    $.each(versions, function (key, value) {
                        drilldownSeries.push({
                            name: key,
                            id: key,
                            data: value
                        });
                    });

                    // Create the chart
                    $('#container').highcharts({
                        chart: {
                            type: 'pie'
                        },
                        title: {
                            text: 'Browser market shares. November, 2013.'
                        },
                        subtitle: {
                            text: 'Click the slices to view versions. Source: netmarketshare.com.'
                        },
                        plotOptions: {
                            series: {
                                dataLabels: {
                                    enabled: true,
                                    format: '{point.name}: {point.y:.1f}%'
                                }
                            }
                        },

                        tooltip: {
                            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
                        },

                        series: [{
                            name: 'Brands',
                            colorByPoint: true,
                            data: brandsData
                        }],
                        drilldown: {
                            series: drilldownSeries
                        }
                    });
                }
            });
        });


    </script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/data.js"></script>
<script src="../../js/modules/drilldown.js"></script>

<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>

<!-- Data from www.netmarketshare.com. Select Browsers => Desktop share by version. Download as tsv. -->
<pre id="tsv" style="display:none">Browser Version	Total Market Share
Microsoft Internet Explorer 8.0	26.61%
Microsoft Internet Explorer 9.0	16.96%
Chrome 18.0	8.01%
Chrome 19.0	7.73%
Firefox 12	6.72%
Microsoft Internet Explorer 6.0	6.40%
Firefox 11	4.72%
Microsoft Internet Explorer 7.0	3.55%
Safari 5.1	3.53%
Firefox 13	2.16%
Firefox 3.6	1.87%
Opera 11.x	1.30%
Chrome 17.0	1.13%
Firefox 10	0.90%
Safari 5.0	0.85%
Firefox 9.0	0.65%
Firefox 8.0	0.55%
Firefox 4.0	0.50%
Chrome 16.0	0.45%
Firefox 3.0	0.36%
Firefox 3.5	0.36%
Firefox 6.0	0.32%
Firefox 5.0	0.31%
Firefox 7.0	0.29%
Proprietary or Undetectable	0.29%
Chrome 18.0 - Maxthon Edition	0.26%
Chrome 14.0	0.25%
Chrome 20.0	0.24%
Chrome 15.0	0.18%
Chrome 12.0	0.16%
Opera 12.x	0.15%
Safari 4.0	0.14%
Chrome 13.0	0.13%
Safari 4.1	0.12%
Chrome 11.0	0.10%
Firefox 14	0.10%
Firefox 2.0	0.09%
Chrome 10.0	0.09%
Opera 10.x	0.09%
Microsoft Internet Explorer 8.0 - Tencent Traveler Edition	0.09%</pre>

</body>
</html>
